<template>
  <section class="content clear">
    <section class="inner-bottom">
      <el-row :gutter="20">
        <el-col :span="4">
          <el-input type="text" v-model="rorleName" placeholder="角色名称" size="small"></el-input>
        </el-col>
        <el-col :span="4">
          <el-select v-model="roleStatus" placeholder="请选择角色状态" size="small">
            <el-option label="全部" :value="-1">
            </el-option>
            <el-option label="已启用" :value="1">
            </el-option>
            <el-option label="已禁用" :value="0">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" size="small" @click="search">搜索</el-button>
        </el-col>
        <el-col :span="12" align="right">
          <el-button type="primary" size="small" @click="addNewRole('add')">新增</el-button>
        </el-col>
      </el-row>
      <el-table :data="tableData" style="width: 100%;margin-top:20px;">
        <el-table-column type="index" label="编号" width="180">
        </el-table-column>
        <el-table-column prop="name" label="名称" width="180">
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间">
          <template slot-scope="scope">
            {{scope.row.createTime | moment('YYYY-MM-DD HH:mm:ss')}}
          </template>
        </el-table-column>
        <el-table-column prop="enabled" label="状态">
          <template slot-scope="scope">
            {{scope.row.enabled ? '启用' : '禁用'}}
          </template>
        </el-table-column>
        <el-table-column prop="address" label="操作">
          <template slot-scope="scope">
            <router-link :to="{name:'roleManageAddApplications',query:{id:scope.row.id,roleName:scope.row.name}}">
              <el-button type="text">添加应用</el-button>
            </router-link>
            <el-button type="text" @click="delRole(scope.row)">删除</el-button>
            <el-button type="text" @click="addNewRole('edit', scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <section class="content-page" style="margin-top:50px;">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page.current" :page-sizes="[10, 15, 20, 30]" :page-size="page.size" layout="total, sizes, prev, pager, next, jumper" :total="page.total">
        </el-pagination>
      </section>
    </section>
    <!-- 新增/编辑角色 -->
    <el-dialog :title="isAddOrEdit==='add'?'新增角色':'编辑角色'" :visible.sync="dialogVisible" width="600px" :before-close="handleClose">
      <el-form :model="roleForm" status-icon :rules="roleFromRules" ref="roleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="角色名称:" prop="name">
          <el-input type="text" v-model="roleForm.name" autocomplete="off" size="small"></el-input>
        </el-form-item>
        <el-form-item label="角色状态：" prop="enabled">
          <el-radio-group v-model="roleForm.enabled">
            <el-radio label="1">启用</el-radio>
            <el-radio label="0">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="角色描述：" prop="description">
          <el-input type="textarea" :rows="4" v-model="roleForm.description" size="small" maxlength="100"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose('roleForm')">取 消</el-button>
        <el-button type="primary" @click="sureAddOrEditRole('roleForm')">确 定</el-button>
      </span>
    </el-dialog>
  </section>
</template>
<script>
import {findRoleByRoleQueryUsingPOST, createRoleUsingPOST, deleteRoleUsingDELETE, updateRoleUsingPUT} from '@api/systemManage'
export default {
  name: 'roleManage',
  data () {
    return {
      activeName: '1',
      isAddOrEdit: 'add', // add:新增；edit:编辑角色
      roleForm: {
        name: null,
        enabled: '0', // (1:启用, 0:禁用)
        description: null
      },
      roleFromRules: {
        name: [{required: true, message: '请输入角色名称', blur: 'blur'}],
        enabled: [{required: true, message: '请选择角色状态', blur: 'blur'}],
        description: [{required: true, message: '请输入角色描述', blur: 'blur'}]
      },
      dialogVisible: false,
      rorleName: null,
      roleStatus: -1,
      tableData: [],
      page: {
        current: 1,
        total: 0,
        size: 10
      }
    }
  },
  created () {
    this.initPage()
  },
  methods: {
    initPage () {
      let params = {
        'enabled': Boolean(this.roleStatus),
        'name': this.rorleName,
        'page': this.page.current,
        'size': this.page.size
      }
      if (this.roleStatus === -1) { // -1:表示全部；不传enabled参数
        delete params.enabled
      }
      findRoleByRoleQueryUsingPOST(params).then(res => {
        if (res.status) {
          this.page.total = res.data.total
          this.tableData = res.data.list
        }
      })
    },
    addNewRole (type = 'add', rowData = null) {
      this.isAddOrEdit = type
      this.dialogVisible = true
      if (type === 'edit') { // 编辑时赋值
        this.roleForm = Object.assign({}, rowData, {
          enabled: rowData.enabled ? '1' : '0'
        })
      }
    },
    sureAddOrEditRole (formName) {
      this.$refs[formName].validate(validate => {
        if (validate && this.isAddOrEdit === 'add') {
          this.addRole()
        } else if (validate && this.isAddOrEdit === 'edit') {
          this.editRole()
        }
      })
    },
    addRole () {
      let params = {
        'description': this.roleForm.description,
        'enabled': Boolean(Number(this.roleForm.enabled)),
        'isInit': false,
        'name': this.roleForm.name
      }
      createRoleUsingPOST(params).then(res => {
        if (res.status) {
          this.$message.success('新增角色成功')
          this.initPage()
          this.handleClose()
        }
      })
    },
    editRole () {
      let params = Object.assign({}, this.roleForm, {
        'enabled': Boolean(Number(this.roleForm.enabled))
      })
      updateRoleUsingPUT(this.roleForm.id, params).then(res => {
        if (res.status) {
          this.$message.success('编辑角色成功')
          this.initPage()
          this.handleClose()
        }
      })
    },
    delRole (rowData) {
      this.$confirm('此操作将删除该角色, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteRoleUsingDELETE(rowData.id).then(res => {
          if (res.status) {
            this.$message.success('删除成功')
            this.initPage()
          }
        })
      }).catch(() => {

      })
    },
    handleClose () {
      this.$refs['roleForm'].resetFields()
      this.$refs['roleForm'].clearValidate()
      this.dialogVisible = false
    },
    search () {
      this.page.current = 1
      this.page.size = 10
      this.initPage()
    },
    handleSizeChange (val) {
      this.page.size = val
      this.initPage()
    },
    handleCurrentChange (val) {
      this.page.current = val
      this.initPage()
    }
  }
}
</script>
